<template>
  <section class="echartsList-wrapper">
    <div class="title-box">
      <span class="title-txt" >{{title}}</span>
    </div>
    <ul class="list-box">
       <li v-for="(item,index) in list" :key="index" class="list-item" :style="{'width':(1/list.length)*100+'%'}">
        <pieEchart  :list="item" :id="'list'+index"/>
      </li>
    </ul>
  </section>
</template>

<script>
import pieEchart from "./pie.vue";
export default {
  name: "EchartsList",
  props:['list','title'],
  components: {
    pieEchart,
  },
  data() {
    return {
    
    };
  },
  methods:{
   
  }
};
</script>

<style lang="scss">
$listMargin: 40px;
.echartsList-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  .title-box {
    position: absolute;
    top: 10%;
    left: 0;
    background: #22579f;
    border-radius: 0 8px 8px 0;
    padding: 14px 10px;
    .title-txt {
      color: #fff;
      writing-mode: vertical-rl;
      letter-spacing: 3px;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .list-box {
    display: flex;
    margin-left: $listMargin;
    width: calc(100% - #{$listMargin});
    height: 100%;
    .list-item {
      // width: 25%;
      // height: 100%;
     
    }
  }
}
</style>